<template>
    <view class="searchPage" :class="{'bgF5': queryType == 2 && list.length}" :style="{'--color': color, '--total-height': totalHeight + 'px'}"> 
        <status-bar title='搜索结果'></status-bar>
        <view class="topArea bgwhite">
            <view class="search bor_f2 bor_radius_30 d-flex a-center" @click="$rectTo('/pages/classify/search?mode=' + mode)">
                <view class="color_33">{{ queryStr }}</view>
            </view>
            <u-tabs :list="tabList" :current="current" :lineColor="color" :inactiveStyle="{transform:'scale(1)'}" @click="tabClick"
                :activeStyle="{color,fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
            <view class="sort-area d-flex j-sa a-center color_33 p-re">
                <!-- 商品 -->
                <block v-if="queryType == 1">
                    <view class="d-flex a-center" :class="{'thmeColor': goodsSort != 5 && goodsSort != 6}" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="goodsSort == 1">新品</template>
                            <template v-else-if="goodsSort == 2">热度</template>
                            <template v-else-if="goodsSort == 3">升序</template>
                            <template v-else-if="goodsSort == 4">降序</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{'thmeColor': goodsSort == 5}" @click="navClick('goodsSort','5')">销量</view>
                    <view class="size28" :class="{'thmeColor': goodsSort == 6}" @click="navClick('goodsSort','6')">好评</view>
                    <view @click="toggleCss">
                        <text class="iconfont icon-liebiao4 size40" v-if="togClass"></text>
                        <text class="iconfont icon-liebiao size40" v-else></text>
                    </view>
                    <view @click="checkScreen = true">
                        <text class="size28 m-right6">筛选</text>
                        <text class="iconfont icon-shaixuan size22 bold"></text>
                    </view>
                    <!-- '综合'下拉菜单 -->
                    <view class="top-pop width bgwhite p-ab hidden" :class="{'active1': checkTab}">
                        <view class="item d-flex j-sb a-center" :class="{'top_borF5': index}" v-for="(item,index) in sortList" :key="index" 
                            @click="navClick('goodsSort',item.sort)">
                            <text class="size28" :class="{'thmeColor': goodsSort == item.sort}">{{ item.name }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="goodsSort == item.sort"></text>
                        </view>
                    </view>
                </block>
                <!-- 店铺 -->
                <block v-if="queryType == 2">
                    <view class="d-flex a-center" :class="{'thmeColor': ['0','1','2'].includes(storeSort)}" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="storeSort == 1">新店</template>
                            <template v-else-if="storeSort == 2">热度</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{'thmeColor': storeSort == 3}" @click="navClick('storeSort','3')">销量</view>
                    <view class="size28" :class="{'thmeColor': storeSort == 4}" @click="navClick('storeSort','4')">好评</view>
                    <view class="size28" :class="{'thmeColor': storeSort == 5}" @click="navClick('storeSort','5')">距离</view>
                    <view class="top-pop width bgwhite p-ab hidden" :class="{'active2': checkTab}">
                        <view class="item d-flex j-sb a-center" :class="{'top_borF5': index}" v-for="(item,index) in ['综合','新店','热度']" :key="index" 
                            @click="navClick('storeSort',String(index))">
                            <text class="size28" :class="{'thmeColor': storeSort == index}">{{ item }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="storeSort == index"></text>
                        </view>
                    </view>
                </block>
                <!-- 资讯 -->
                <block v-if="queryType == 3">
                    <view class="d-flex a-center" :class="{'thmeColor': ['0','1','2'].includes(articleSort)}" @click="checkTab = !checkTab">
                        <text class="size28 m-right6">
                            <template v-if="articleSort == 1">新加</template>
                            <template v-else-if="articleSort == 2">热度</template>
                            <template v-else>综合</template>
                        </text>
                        <text class="iconfont icon-shangsanjiaoxing h7" v-if="checkTab"></text>
                        <text class="iconfont icon-xiasanjiaoxing h7" v-else></text>
                    </view>
                    <view class="size28" :class="{'thmeColor': articleSort == 3}" @click="navClick('articleSort','3')">点赞</view>
                    <view class="size28" :class="{'thmeColor': articleSort == 4}" @click="navClick('articleSort','4')">评论</view>
                    <view @click="toggleCss">
                        <text class="iconfont icon-liebiao size40" v-if="togClass"></text>
                        <text class="iconfont icon-liebiao4 size40" v-else></text>
                    </view>
                    <view class="top-pop width bgwhite p-ab hidden" :class="{'active2': checkTab}">
                        <view class="item d-flex j-sb a-center" :class="{'top_borF5': index}" v-for="(item,index) in ['综合','新加','热度']" :key="index" 
                            @click="navClick('articleSort',String(index))">
                            <text class="size28" :class="{'thmeColor': articleSort == index}">{{ item }}</text>
                            <text class="iconfont icon-xuanzhong size34 thmeColor" v-if="articleSort == index"></text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view class="mask" v-if="checkTab" @click="checkTab = false"></view>
        <view class="p-topTotal">
            <!-- 商品 -->
            <view class="padding20" v-if="queryType == 1 && list.length">
                <view v-if="togClass">
                    <waterfall v-model="list"></waterfall>
                </view>
                <view v-else>
                    <view class="d-flex m-bot20" v-for="(item,index) in list" :key="index" @click="toGoods(item.goods_id, item.store_id)">
                        <image :src="item.img ? $imgUrls(item.img) : defaultUrl" mode="aspectFill" class="goods_img bor_radius_10"></image>
                        <view class="flex-1 padding10-20 d-flex f-column j-sb">
                            <view class="size28 ellipsis_2">{{ item.name }}</view>
                            <view class="color_99">
                                <text class="m-right20" v-if="item.sales_number != 0">已售{{ item.sales_number }}</text>
                                <text class="m-right20" v-if="item.show_number != 0">热度{{ item.show_number }}</text>
                                <text v-if="item.commentNum != 0">评价{{ item.commentNum }}</text>
                            </view>
                            <view class="color_FOD" v-if="item.buy_config.state == 1">
                                ￥<text class="size32 bold">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                            </view>
                            <view class="d-flex a-center" @click.stop="toUrl('/pages/store/storeIndex?shop_id=' + item.store_id)" v-if="item.storeInfo.store_id">
                                <view class="type thmeBg bor_radius_6 h7 white" v-if="item.storeInfo.bussName">{{ item.storeInfo.bussName }}</view>
                                <view class="flex-1 color_66 ellipsis m-left10">{{ item.storeInfo.name }}</view>
                                <view class="m-left10">进店<text class="iconfont icon-xiangyouxiayiye h7"></text></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 店铺 -->
            <view class="padding20" v-if="queryType == 2 && list.length">
                <view class="bgwhite bor_radius_20 padding30 m-bot20" v-for="(item,index) in list" :key="index"
                    @click="toUrl('/pages/store/storeIndex?shop_id=' + item.store_id)">
                    <view class="d-flex">
                        <image class="logo bor_radius m-right20" :src="$imgUrls(item.logo)" mode="aspectFill"></image>
                        <view class="flex-1">
                            <view class="d-flex a-center m-bot10">
                                <view class="type thmeBg bor_radius_6 h7 white" v-if="item.bussName">{{ item.bussName }}</view>
                                <view class="flex-1 size30 ellipsis m-left10">{{ item.name }}</view>
                                <view class="m-left10">进店<text class="iconfont icon-xiangyouxiayiye h6"></text></view>
                            </view>
                            <view class="d-flex m-bot10">
                                <view class="color_FOD m-right20" v-if="item.score != 0"><text class="bold">{{ item.score }}</text>分</view>
                                <view class="color_68 m-right20" v-if="item.sales_number != 0">销量{{ item.sales_number }}</view>
                                <view class="color_68" v-if="item.browsingV != 0">热度{{ item.browsingV }}</view>
                            </view>
                            <view class="d-flex a-center color_68" v-if="item.address">
                                <text class="iconfont icon-wodedizhi1 m-right10"></text>
                                <view class="flex-1 ellipsis">{{ item.address }}</view>
                                <view class="p-left10" v-if="item.distance">{{ item.distance }}km</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 资讯 -->
            <view v-if="queryType == 3 && list.length">
                <view class="p-left30 p-right30" v-if="togClass">
                    <view class="p-top30 p-bot30 bot" v-for="(item,index) in list" :key="index" @click="$pop.artDetails(item)">
                        <!-- 没有图片 -->
                        <view class="size32 ellipsis_2" v-if="!item.website_article_img && !item.photoArr">{{ item.website_article_title }}</view>
                        <!-- 右边小图 -->
                        <view class="d-flex" v-else-if="item.website_article_img && !item.photoArr">
                            <view class="flex-1 m-right30">
                                <view class="size32 ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
                                <view class="size28 color_77 ellipsis">{{ item.website_article_info }}</view>
                            </view>
                            <image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="small_img"></image>
                        </view>
                        <!-- 一张大图 -->
                        <view v-else-if="item.photoArr.length == 1">
                            <view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
                            <image :src="$imgUrls(item.photoArr[0])" mode="aspectFill" class="big_img m-top30"></image>
                        </view>
                        <!-- 多图 -->
                        <view v-else-if="item.photoArr.length > 1">
                            <view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
                            <scroll-view scroll-x class="scroll-row m-top20">
                                <image :src="$imgUrls(subItem)" mode="aspectFill" class="more_img" v-for="(subItem,subIndex) in item.photoArr" :key="subIndex"></image>
                            </scroll-view>
                        </view>
                        <view class="color_77 m-top40">
                            <text class="m-right12" v-if="item.website_article_views != 0">{{ item.website_article_views }}阅读</text>
                            <text class="m-right12" v-if="item.allZan != 0">{{ item.allZan }}点赞</text>
                            <text v-if="item.allComment != 0">{{ item.allComment }}评论</text>
                        </view>
                    </view>
                </view>
                <view class="padding20" v-else>
                    <waterfall v-model="list" type="article"></waterfall>
                </view>
            </view>
            
            <view class="color_66 text-center padding20" v-if="noMore && page > 1">没有更多了</view>
            <emptys v-if="noData" empty="search" title="没有搜索结果"></emptys>
        </view>

        <!-- 右侧弹出层 -->
        <view class="right-pop wh" v-if="checkScreen" @click="checkScreen = false">
            <view class="content viewbox600 height bgwhite p-ab d-flex f-column" @click.stop>
                <text class="iconfont icon-guanbi1 size30" @click="checkScreen = false"></text>
                <view class="flex-1 scroll-y p-left30">
                    <view class="size26 bold m-bot30 m-top20">价格区间</view>
                    <view class="d-flex a-center m-bot40 text-center color_33">
                        <input class="range flex-1 m-right10" v-model="queryParams.price1" type="number" placeholder="最低价" />
                        <text class="iconfont icon-jianhao color_66 m-right10"></text>
                        <input class="range flex-1 m-right30" v-model="queryParams.price2" type="number" placeholder="最高价" />
                    </view>
                    <view class="size26 bold m-bot30 m-top20">分类</view>
                    <view class="option" :class="{'thmeBg white': queryParams.classify_id == item.id}" v-for="(item,index) in classifyData.peerClass" :key="index"
                        @click="checkClass('classify_id', item.id)">{{ item.name }}</view>
                </view>
                <view class="d-flex j-se p-top30 p-top30">
                    <view class="btn flexac bor_cc color_33" @click="handleReset">重置</view>
                    <view class="btn flexac thmeBg white" @click="handleConfirm">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
import waterfall from '../components/search/waterfall.vue'
export default {
    data() {
        return {
            defaultUrl: this.staticUrl + '/images/imageLoading.png',
            mode: '1,2', // 可供查询类型的字符串
            queryStr: '', // 关键字
            queryType: '',
            tabList: [
                { name: '商品', mode: '1' },
                { name: '店铺', mode: '2' },
                { name: '资讯', mode: '3' }
            ],
            current: 0,
            list: [],
            page: 1,
            limit: 10,
            checkTab: false, // '综合'下拉菜单
            togClass: true, // 切换样式
            noData: false,
            noMore: false,
            // 商品
            checkScreen: false, // 打开筛选
            goodsSort: '0',
            sortList: [
                { name: '综合', sort: '0' },
                { name: '新品', sort: '1' },
                { name: '热度', sort: '2' },
                { name: '价格升序', sort: '3' },
                { name: '价格降序', sort: '4' }
            ],
            classifyData: '',
            queryParams: {
                price1: '', // 最低价
                price2: '', // 最高价
                classify_id: ''
            },
            // 店铺
            storeSort: '0',
            // 资讯
            articleSort: '0'
        }
    },
    computed: {
        ...mapState(['color', 'totalHeight'])
    },
    components: {
        waterfall
    },
    onLoad(e) {
        if(e.name) this.queryStr = e.name
        if(e.mode) this.mode = e.mode
        this.getTabs()
    },
    methods: {
        getTabs(){
            let arr = this.mode.split(',')
            this.tabList = this.tabList.filter(item=>arr.includes(item.mode))
            if(arr.find(num=>num == 1)) this.getClassify()
            this.tabClick()
        },
        tabClick(e){
            if(e) {
                this.current = e.index
                // 重置
                this.togClass = true
                this.checkTab = false
                this.goodsSort = this.storeSort = this.articleSort = '0'
            }
            this.queryType = this.tabList[this.current].mode
            this.dataInit()
        },
        dataInit(){
            this.$showLoading('正在加载')
            this.page = 1
            this.list = []
            this.getResult()
        },
        getResult(){
            this.noData = false
            this.noMore = false
            let params = {}
            if(this.queryType == 1) params = { ...this.queryParams, goodsSort: this.goodsSort}
            if(this.queryType == 2) params.storeSort = this.storeSort
            if(this.queryType == 3) params.articleSort = this.articleSort

            this.$http.post({
                url: '/comprehensiveQuery/queryApi',
                data: {
                    queryStr: this.queryStr,
                    queryType: this.queryType,
                    page: this.page,
                    limit: this.limit,
                    ...params
                }
            }).then(res=>{
                this.$hideLoading()
                if(res.code != 200) return this.$Toast(res.msg)
                let result
                if(this.queryType == 1) result = res.data.goods
                if(this.queryType == 2) result = res.data.store
                if(this.queryType == 3) result = res.data.article
                if(result) {
                    if(result.list) this.list = this.page == 1 ? result.list : this.list.concat(result.list)
                    if(!result.list || result.list.length < this.limit) this.noMore = true
                }
                if(!this.list.length) this.noData = true
            })
        },
        getClassify(){
            this.$http.post({ // 若传classify_id可得下级分类
                url: '/singleSaleApi/getClassify'
            }).then(res=>{
                this.classifyData = res.data || ''
            })
        },
        navClick(key, value){
            this[key] = value
            setTimeout(()=>{
                this.checkTab = false
            },200)
            this.dataInit()
        },
        toggleCss(){
            this.togClass = !this.togClass
            this.dataInit()
        },
        checkClass(key, value){
            this.queryParams[key] = this.queryParams[key] == value ? '' : value
        },
        handleReset(){
            for(let key in this.queryParams) {
                this.queryParams[key] = ''
            }
            this.checkScreen = false
            this.dataInit()
        },
        handleConfirm(){
            if(Number(this.queryParams.price1) > Number(this.queryParams.price2)) {
                let max = this.queryParams.price2
                this.queryParams.price2 = this.queryParams.price1
                this.queryParams.price1 = max
            }
            this.checkScreen = false
            this.dataInit()
        }
    },
    onReachBottom() { // 设置"scroll-y"不会触发
        if(this.noMore) return
        this.page ++ 
        this.getResult()
    }
}
</script>

<style lang="scss" scoped>
.searchPage {
    min-height: 100vh;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.topArea {
    width: 100%;
    position: fixed;
    top: var(--total-height);
    left: 0;
    z-index: 99;
}
.p-topTotal {
    padding-top: calc(148rpx + 44px);
}
.search {
    margin: 0 20rpx;
    height: 60rpx;
    padding: 0 20rpx;
}
.sort-area {
    height: 88rpx;
    .top-pop {
        height: 0;
        left: 0;
        top: 88rpx;
        transition: height 0.2s;
        &.active1 {
            height: 400rpx;
        }
        &.active2 {
            height: 240rpx;
        }
        .item {
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 24rpx;
        }
    }
}
// 商品
.goods_img {
    width: 240rpx;
    height: 240rpx;
}
// 店铺
.logo {
    width: 100rpx;
    height: 100rpx;
}
.type {
    width: fit-content;
    line-height: 32rpx;
    padding: 0 10rpx;
}
// 资讯
.small_img {
    width: 200rpx;
    height: 120rpx;
}
.big_img {
    height: 340rpx;
}
.more_img {
    width: 210rpx;
    height: 180rpx;
    &:not(:last-child){
        margin-right: 30rpx;
    }
}
.mask {
    z-index: 90;
    transition: all 0.2s;
}
.right-pop {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    .content {
        top: 0;
        animation: fade-in .2s linear forwards;
        padding-top: var(--total-height);
        .icon-guanbi1 {
            margin: 20rpx 24rpx 0 auto;
        }
        .option {
            display: inline-block;
            min-width: 160rpx;
            line-height: 56rpx;
            text-align: center;
            background: #f9f9f9;
            border-radius: 56rpx;
            color: #333;
            padding: 0 10rpx;
            margin: 0 30rpx 20rpx 0;         
        }
        .range {
            height: 56rpx;
            background: #f9f9f9;
            border-radius: 56rpx;
        }
        .btn {
            width: 220rpx;
            height: 66rpx;
            border-radius: 33rpx;
            margin-bottom: calc(30rpx + constant(safe-area-inset-bottom));
            margin-bottom: calc(30rpx + env(safe-area-inset-bottom));
        }
    }
}
@keyframes fade-in {
    0% { right: -600rpx; }
    100% { right: 0; }
}
</style>